<template>
	<cl-dialog
		title="绑定小程序"
		width="400px"
		:visible.sync="visible"
		:before-close="beforeClose"
		@close="close"
		:props="{
			top: '5vh',
			appendToBody: true,
			closeOnClickModal: false
		}"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<!-- <el-form-item label="所属品牌" prop="bra_id">
				<cl-select
					style="width: 100%"
					v-model="form.bra_id"
					placeholder="请选择所属品牌"
					filterable
					@change="changeBarnd"
				>
					<el-option
						v-for="item in bizRefData.brand"
						:key="item.bra_id"
						:label="item.bra_name"
						:value="item.bra_id"
					/>
				</cl-select>
			</el-form-item> -->

			<el-form-item label="选择小程序(支持多选)" prop="mini_id">
				<cl-select
					v-model="form.mini_id"
					style="width: 100%"
					placeholder="请选择"
					filterable
					multiple
					:multiple-limit="20"
				>
					<el-option
						:label="item.title"
						:value="item.id"
						v-for="(item, index) in miniprogramList"
						:key="index"
					/>
				</cl-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" :loading="saving" @click="submit">确定</el-button>
		</template>
	</cl-dialog>
</template>
<script>
export default {
	data() {
		return {
			visible: false,
			saving: false,
			form: {
				id: undefined,
				biz_id: null,
				bra_id: null,
				mini_id: []
			},
			rules: {
				mini_id: [{ required: true, message: "请选择小程序" }]
			},
			// 小程序列表
			miniprogramList: []
		};
	},
	computed: {
		// bizRefData() {
		// 	let { biz_id } = this.form;
		// 	return this.getBizRefData(biz_id);
		// }
	},
	created() {},
	methods: {
		open(data = {}) {
			this.form.id = data.id;
			this.form.biz_id = data.biz_id;
			this.form.bra_id = data.bra_id;
			this.form.mini_id = data.mini_id ? data.mini_id : [];

			this.visible = true;

			// const { biz_id } = this.form;
			// this.getBizRefBrand(biz_id);
			this.getMiniprogramList();
		},
		beforeClose(done) {
			!this.saving && done();
		},
		close() {
			this.reset();
			this.visible = false;
		},
		reset() {
			this.form = {
				id: undefined,
				biz_id: "",
				mini_id: []
			};
			this.$refs.form.resetFields();
		},
		//获取小程序列表
		async getMiniprogramList() {
			const { biz_id, bra_id } = this.form;
			const data = await this.$service.ad.adMini({ biz_id, bra_id, ad_id: 1, status: 1 });

			this.miniprogramList = data.list;
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				await this.$service.ad
					.setPoolMini({
						id: this.form.id,
						mini_id: this.form.mini_id
					})
					.done(() => {
						this.saving = false;
					});
				this.$message.success("绑定成功");
				this.close();
				this.$emit("confirm");
			});
		},
		changeBarnd() {
			this.getMiniprogramList();
		}
	}
};
</script>
